<template>
	<view class="merchant-submits-apply">
		<view class="merchant-submits-name">商家名称：京城御面馆</view>
		<view class="merchant-submits-apply-top">
			<view class="radio-box">
				<text class="radio-box-text">储值类型</text>
				<label class="radio-one" @click="radio('1')">
					<radio value="1" :checked="bianhao==='1'" color="#f00" /><text>否</text></label>
				<label class="radio-two" @click="radio('2')">
					<radio value="2" :checked="bianhao==='2'" color="#f00" /><text>是</text></label>
			</view>
		</view>
		<view class="merchant-submits-apply-bottom">
			<view class="merchant-submits-apply-info">
				<text class="merchant-submits-apply-info-txt">会员折扣</text>
				<view class="merchant-submits-apply-info-input">
					<input placeholder="请输入会员折扣" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
					<view class="merchant-submits-apply-info-input-close">×</view>
				</view>
			</view>
			<view class="merchant-submits-apply-info">
				<text class="merchant-submits-apply-info-txt">PLUS会员折扣</text>
				<view class="merchant-submits-apply-info-input">
					<input placeholder="请输入PLUS会员折扣" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
					<view class="merchant-submits-apply-info-input-close">×</view>
				</view>
			</view>
			<view class="merchant-submits-apply-info">
				<text class="merchant-submits-apply-info-txt">授信额度</text>
				<view class="merchant-submits-apply-info-input">
					<input placeholder="请输入授信额度" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
					<view class="merchant-submits-apply-info-input-close">×</view>
				</view>
			</view>
			<view class="merchant-submits-apply-info">
				<text class="merchant-submits-apply-info-txt">开户行</text>
				<view class="merchant-submits-apply-info-input">
					<input placeholder="请输入开户行" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
					<view class="merchant-submits-apply-info-input-close">×</view>
				</view>
			</view>
			<view class="merchant-submits-apply-info">
				<text class="merchant-submits-apply-info-txt">开户名称</text>
				<view class="merchant-submits-apply-info-input">
					<input placeholder="请输入开户名称" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
					<view class="merchant-submits-apply-info-input-close">×</view>
				</view>
			</view>
			<view class="merchant-submits-apply-info">
				<text class="merchant-submits-apply-info-txt">银行账户</text>
				<view class="merchant-submits-apply-info-input">
					<input placeholder="请输入银行账户" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
					<view class="merchant-submits-apply-info-input-close">×</view>
				</view>
			</view>
		</view>
		<view class="merchant-submits-apply-top">
			<view class="radio-box">
				<text class="radio-box-text">账户类型</text>
				<label class="radio-one" @click="radio1('1')">
					<radio value="1" :checked="bianhao1==='1'" color="#f00" /><text>对公</text></label>
				<label class="radio-two" @click="radio1('2')">
					<radio value="2" :checked="bianhao1==='2'" color="#f00" /><text>对私</text></label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bianhao: '1',
				bianhao1: '1',
			}
		},
		methods: {
			radio(e) {
				this.bianhao = e;
			},
			radio1(e) {
				this.bianhao1 = e;
			}
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
		padding: 15rpx;
		box-sizing: border-box;
	}
</style>
<style scoped>
	.merchant-submits-apply {
		padding: 20rpx 30rpx 40rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 12rpx;
	}

	.merchant-submits-name {
		font-size: 28rpx;
		font-weight: 600;
		border-bottom: 2rpx solid #EEEEEE;
		height: 80rpx;
		line-height: 80rpx;
		opacity: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.radio-box {
		padding: 12rpx 0rpx 0rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.radio-box-text {
		font-size: 30rpx;
		color: #333;
		line-height: 60rpx;
		font-weight: 600;
		float: left;
		display: block;
		margin-right: 30rpx;
	}

	.radio-one {
		color: #333333;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 60rpx;
		float: left;
	}

	.radio-one text {
		margin-top: 2rpx;
		float: left;
	}

	.radio-one radio {
		margin-right: 10rpx;
		float: left;
		transform: scale(0.7);
	}

	.radio-two {
		color: #333333;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		float: left;
	}

	.radio-two text {
		float: left;
		margin-top: 2rpx;
	}

	.radio-two radio {
		margin-right: 10rpx;
		float: left;
		transform: scale(0.7);
	}

	.merchant-submits-apply-info-txt {
		font-size: 28rpx;
		color: #000000;
		line-height: 70rpx;
		font-weight: 600;
		margin-right: 10rpx;

	}

	.merchant-submits-apply-info-input {
		width: 100%;
		height: 80rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgba(221, 221, 221);
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.merchant-submits-apply-info-input-input {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		width: calc(100% - 60rpx);
		height: 100%;
		box-sizing: border-box;
		padding-left: 22rpx;
		font-size: 30rpx;
		line-height: 80rpx;
	}

	.merchant-submits-apply-info-input-close {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #C6C6C6;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

</style>
